<template>
    <div class="tags-views">
        <ul class="tags-list">
            <li v-for="(item, index) in tagsList" :key="item.path" @click="toPage(item)" :class="{active: currentRouter.path === item.path}">
                <span>{{ item?.meta?.title }}</span>
                <i class="iconfont icon-X" @click.stop="handleDelTags(item)"></i>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { useTagsViews, useKeepAlive } from "@/hook"
const { useDeleteComponent } = useKeepAlive()
const { tagsList, currentRouter, toPage, delTagsViews } = useTagsViews()
const handleDelTags = (item) => {
    useDeleteComponent(item.path)
    delTagsViews(item)
}
</script>
<style lang="scss" scoped>
.tags-views {
    flex: 1;
    width: 0;
}
.tags-list {
    display: flex;
    margin-bottom: 0;
    margin-top: 12px;
    li {
        height: 36px;
        border-radius: 8px 8px 0 0;
        background-color: #fff;
        padding: 0 16px;
        display: flex;
        align-items: center;
        margin-right: 10px;
        font-size: 14px;
        color: var(--gray-9);
        cursor: pointer;
        &.active {
            color: var(--gray-3);
            background-color: #F5F5F5;
        }
    }
    i {
        font-size: 8px;
        margin-left: 10px;
    }
}
</style>